<template>
	<view class="order">
		<view class="nav clearfix">
			<view :class="[activeIndex==1?'active':'']" @click="qiehuan(1)">
				<view class="title">进行中</view>
				<view class="dingwei"></view>
			</view>
			<view :class="[activeIndex==2?'active':'']" @click="qiehuan(2)">
				<view class="title">已完成</view>
				<view class="dingwei"></view>
			</view>
			<view :class="[activeIndex==3?'active':'']" @click="qiehuan(3)">
				<view class="title">已购买</view>
				<view class="dingwei"></view>
			</view>
			<view :class="[activeIndex==4?'active':'']" @click="qiehuan(4)">
				<view class="title">已取消</view>
				<view class="dingwei"></view>
			</view>
		</view>
		<view class="content" v-if="list.length != 0">
			<view class="list" v-for="(item,index) in list" :key="index" @click="topage(index)">
				<view class="top clearfix">
					<view class="left fl">
						<image :src="baseUrl + '/wximage/order_dingdan.png'" class="fl"></image>
						<view class="title fl">订单编号：{{item.out_order_no}}</view>
					</view>
					<view class="other fr" v-if="item.status == 0">弹宝中</view>
					<view class="jinxingzhong fr" v-else-if="item.status == 1">计费中</view>
					<view class="other fr" v-else-if="item.status == 2">暂停计费</view>
					<view class="other fr" v-else-if="item.status == 3">待支付</view>
					<view class="other fr" v-else-if="item.status == 4">支付中</view>
					<view class="wancheng fr" v-else-if="item.status == 5">已完成</view>
					<view class="other fr" v-else-if="item.status == 6">已取消</view>
					<view class="other fr" v-else-if="item.status == 7">部分退款</view>
					<view class="other fr" v-else-if="item.status == 8">全部退款</view>
					<view class="other fr" v-else-if="item.status == 9">退款中</view>
					<view class="other fr" v-else-if="item.status == 11">已购买</view>
				</view>
				<view class="center" v-if="item.attr != 2">
					<view class="li clearfix">
						<view class="name fl">充电时间：</view>
						<view class="desc fr">{{item.sdate}}</view>
					</view>
					<view class="li clearfix">
						<view class="name fl">归还时间：</view>
						<view class="desc fr" v-if="item.edate">{{item.edate}}</view>
						<view class="desc fr" v-else>--</view>
					</view>
					<view class="li clearfix">
						<view class="name fl">累计时间：</view>
						<view class="desc fr">{{item.sjshichang}}</view>
					</view>
				</view>
				<view class="center" v-else >
					<view class="li clearfix">
						<view class="name fl">下单时间：</view>
						<view class="desc fr">{{item.sdate}}</view>
					</view>
				</view>
				<view class="bottom clearfix">
					<view class="more fl">查看更多</view>
					<view class="price fr" v-if="item.status == 5">已支付：{{item.money}}元</view>
					<view class="price fr" v-if="item.status == 3">待支付：{{item.money}}元</view>
				</view>
			</view>
		</view>
		<view class="empty" v-else>
			<image :src="baseUrl + '/wximage/coupons_empty.png'"></image>
			<view class="name">暂无数据</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				baseUrl: getApp().globalData.baseUrl,
				activeIndex: 1,
				list: [],
				page: 1,
				pageSize: 10,
				total: 0,
			}
		},
		onLoad() {
			this.getList(this.page,this.pageSize,this.activeIndex);
		},
		onReachBottom() {
			if (this.total != this.list.length) {
				this.page = this.page + 1;
		
				this.getList(this.page,this.pageSize,this.activeIndex);
			}
		},
		methods:{
			getList(page,pageSize,activeIndex){
				this.request({
					url: '/orderx/orderuserlist',
					data: {
						user_id: uni.getStorageSync('user_id'),
						page: page,
						pageSize: pageSize,
						activeIndex: activeIndex,
					},
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						this.total = res.data.data.total;
						this.list = this.list.concat(res.data.data.data);
					}
				})
			},
			qiehuan(index){
				this.activeIndex = index;
				
				this.page = 1;
				this.list = [];
				
				this.getList(this.page,this.pageSize,this.activeIndex);
			},
			topage(index){
				let id = this.list[index].id;
				let danhao = this.list[index].danhao;
				
				if(this.list[index].status == 1 && this.list[index].attr == 1){
					uni.navigateTo({
						url: '/pages/order/indetail?id=' + id,
					})
				}else if(this.list[index].status == 11 && this.list[index].attr == 1){
					uni.navigateTo({
						url: '/pages/order/successdetail?id=' + id,
					})
				}else if(this.list[index].status == 6 && this.list[index].attr == 1){
					uni.navigateTo({
						url: '/pages/order/successdetail?id=' + id,
					})
				}else if(this.list[index].attr == 2 || this.list[index].attr == 3){
					uni.navigateTo({
						url: '/pages/order/linedetail?danhao=' + danhao,
					})
				}else{
					uni.navigateTo({
						url: '/pages/order/detail?id=' + id,
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #F8F8F8;
	}
	
	.order{
		width: 100%;
		margin: 0 auto;
		
		.nav{
			width: 100%;
			background: #ffffff;
			height: 84rpx;
			line-height: 84rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			
			>view{
				display: inline-block;
				
				.title{
					font-size: 24rpx;
					color: #333333;
					margin-right: 32rpx;
				}
			}
			
			.active{
				position: relative;
				
				.title{
					font-size: 32rpx;
					font-weight: 700;
				}
				
				.dingwei{
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					background: linear-gradient(to bottom, #10DAC5, #59FFF6);
					position: absolute;
					top: 12rpx;
					right: 22rpx;
				}
			}
		}
		
		.content{
			width: 90%;
			margin: 20rpx auto;
			
			.list{
				width: 100%;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				background: #ffffff;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				
				.top{
					line-height: 48rpx;
					border-bottom: 1rpx solid #D8D8D8;
					padding-bottom: 14rpx;
					
					.left{
						width: 78%;
						
						image{
							width: 48rpx;
							height: 48rpx;
							margin-right: 8rpx;
						}
						
						.title{
							font-size: 24rpx;
							color: #999999;
							width: 86%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					
					.wancheng{
						font-size: 28rpx;
						color: #1BE0CD;
						font-weight: 700;
						width: 20%;
						text-align: right;
					}
					
					.jinxingzhong{
						font-size: 28rpx;
						color: #FFD400;
						font-weight: 700;
						width: 20%;
						text-align: right;
					}
					
					.other{
						font-size: 28rpx;
						color: #9100d9;
						font-weight: 700;
						width: 20%;
						text-align: right;
					}
				}
				
				.center{
					margin-top: 20rpx;
					border-bottom: 1rpx solid #D8D8D8;
					
					.li{
						margin-bottom: 20rpx;
						
						.name{
							font-size: 24rpx;
							color: #666666;
						}
						
						.desc{
							font-size: 24rpx;
							color: #666666;
						}
					}
				}
				
				.bottom{
					margin-top: 26rpx;
					height: 38rpx;
					line-height: 38rpx;
					
					.more{
						font-size: 24rpx;
						color: #999999;
					}
					
					.price{
						font-size: 28rpx;
						font-weight: 700;
						color: #ED7E55;
					}
				}
			}
		}
		
		.empty{
			width: 100%;
			margin: 0 auto;
			margin-top: 200rpx;
			text-align: center;
			
			image{
				width: 220rpx;
				height: 180rpx;
			}
			
			.name{
				font-size: 24rpx;
				color: #666666;
				margin-top: 10rpx;
			}
		}
	}
</style>